import 'package:flutter/material.dart';
import '../model/post.dart';

class SliverDemo extends StatelessWidget {
  const SliverDemo({super.key});

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            // title: const Text('DuDing'),
            // pinned: true,
            floating: true,
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              title: Text(
                'Hello Duding'.toUpperCase(),
                style: const TextStyle(
                  fontSize: 15,
                  letterSpacing: 3,
                  fontWeight: FontWeight.w400
                ),
              ),
              background: Image.network(
                'https://p1.itc.cn/q_70/images03/20210529/f40581a63e464a778594fecf44f5bb72.jpeg',
                fit: BoxFit.cover,  
              ),
            ),
          ),
          const SliverSafeArea(
            sliver: SliverPadding(
              padding: EdgeInsets.all(8),
              sliver: SliverGridDemo(),
            )
          ),
        ],
      ),
    );
  }
}

class SliverListDemo extends StatelessWidget {
  const SliverListDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) => Padding(
          padding: const EdgeInsets.only(bottom: 32),
          child: Material(
            clipBehavior: Clip.hardEdge,
            borderRadius: BorderRadius.circular(20),
            elevation: 14,
            shadowColor: Colors.grey.withOpacity(0.6),
            child: Stack(
              children: [
                AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Image.network(
                    posts[index].imageUrl,
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned(
                  top: 32,
                  left: 32,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        posts[index].title,
                        style: const TextStyle(
                          backgroundColor: Color.fromRGBO(0, 0, 0, 0.4),
                          fontSize: 20,
                          color: Colors.white,
                        ),
                      ),
                      Text(
                        posts[index].author,
                        style: const TextStyle(
                          backgroundColor: Color.fromRGBO(0, 0, 0, 0.4),
                          fontSize: 13,
                          color: Colors.white
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        childCount: posts.length,
      ),
    );
  }
}

class SliverGridDemo extends StatelessWidget {
  const SliverGridDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
        childAspectRatio: 0.7,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) => Image.network(
          posts[index].imageUrl,
          fit: BoxFit.cover,
        ),
        childCount: posts.length,
      ),
    );
  }
}
